<template>
  <Layout>
    <div class="flexs">
      <Form style="width: 50%" ref="formInline" :model="formInline" :rules="ruleInline">
        <FormItem prop="user">
          <Input type="text" v-model="formInline.user" placeholder="Username">
            <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="password">
          <Input type="password" v-model="formInline.password" placeholder="Password">
            <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSubmit">Signin</Button>
        </FormItem>
      </Form>
    </div>
  </Layout>
</template>

<script>
export default {
    data(){
      return{
        formInline: {
          user: '',
          password: ''
        },
        ruleInline: {
          user: [
            { required: true, message: 'Please fill in the user name', trigger: 'blur' }
          ],
          password: [
            { required: true, message: 'Please fill in the password.', trigger: 'blur' },
            { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
          ]
        }
      }
    },
  methods:{
    handleSubmit() {
      sessionStorage.setItem('name',this.formInline.user);
      this.$router.push('/userinfo');
    }
  }
}
</script>

<style scoped>
  .flexs {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 600px;
  }
</style>
